<template>
  <div class="login-container">
    <el-dialog v-model="userStore.showLogin" title="用户登录" @close="dialogClose">
      <div class="content">
        <div class="left">
          <div class="phoneLogin" v-show="scene===0">
            <!--            表单-->
            <el-form :model="loginParam" :rules="rules" status-icon ref="formRef">
              <el-form-item prop="phone">
                <el-input placeholder="请输入手机号码" :prefix-icon="Search"
                          v-model.number="loginParam.phone"></el-input>
              </el-form-item>
              <el-form-item prop="code">
                <el-input placeholder="请输入验证码" :prefix-icon="Lock" v-model="loginParam.code"></el-input>
              </el-form-item>
              <el-button v-if="!butTimer" :disabled="!isPhone" @click="getPhoneCode">获取验证码</el-button>
              <el-button v-if="butTimer" :disabled="butTimer">获取验证码({{ countdownNumber }}s)</el-button>
            </el-form>
            <div class="bottom">
              <el-button type="primary" style="width: 100%" @click="userLogin">用户登录</el-button>
              <p>微信扫码登录</p>
              <svg @click="wechatLogin" t="1691037470184" class="icon" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg"
                   p-id="2332" width="32" height="32">
                <path
                    d="M337.387283 341.82659c-17.757225 0-35.514451 11.83815-35.514451 29.595375s17.757225 29.595376 35.514451 29.595376 29.595376-11.83815 29.595376-29.595376c0-18.49711-11.83815-29.595376-29.595376-29.595375zM577.849711 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763zM501.641618 401.017341c17.757225 0 29.595376-12.578035 29.595376-29.595376 0-17.757225-11.83815-29.595376-29.595376-29.595375s-35.514451 11.83815-35.51445 29.595375 17.757225 29.595376 35.51445 29.595376zM706.589595 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763z"
                    fill="#28C445" p-id="2333"></path>
                <path
                    d="M510.520231 2.959538C228.624277 2.959538 0 231.583815 0 513.479769s228.624277 510.520231 510.520231 510.520231 510.520231-228.624277 510.520231-510.520231-228.624277-510.520231-510.520231-510.520231zM413.595376 644.439306c-29.595376 0-53.271676-5.919075-81.387284-12.578034l-81.387283 41.433526 22.936416-71.768786c-58.450867-41.433526-93.965318-95.445087-93.965317-159.815029 0-113.202312 105.803468-201.988439 233.803468-201.98844 114.682081 0 216.046243 71.028902 236.023121 166.473989-7.398844-0.739884-14.797688-1.479769-22.196532-1.479769-110.982659 1.479769-198.289017 85.086705-198.289017 188.67052 0 17.017341 2.959538 33.294798 7.398844 49.572255-7.398844 0.739884-15.537572 1.479769-22.936416 1.479768z m346.265896 82.867052l17.757225 59.190752-63.630058-35.514451c-22.936416 5.919075-46.612717 11.83815-70.289017 11.83815-111.722543 0-199.768786-76.947977-199.768786-172.393063-0.739884-94.705202 87.306358-171.653179 198.289017-171.65318 105.803468 0 199.028902 77.687861 199.028902 172.393064 0 53.271676-34.774566 100.624277-81.387283 136.138728z"
                    fill="#28C445" p-id="2334"></path>
              </svg>
            </div>
          </div>
          <div class="wechatLogin" v-show="scene===1">
            <div id="login_container"></div>
            <p>手机短信验证码登录</p>
            <svg @click="scene=0" t="1691303803516" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                 p-id="3753" width="32" height="32">
              <path
                  d="M820.409449 797.228346q0 25.19685-10.07874 46.866142t-27.716535 38.299213-41.322835 26.204724-50.897638 9.574803l-357.795276 0q-27.212598 0-50.897638-9.574803t-41.322835-26.204724-27.716535-38.299213-10.07874-46.866142l0-675.275591q0-25.19685 10.07874-47.370079t27.716535-38.80315 41.322835-26.204724 50.897638-9.574803l357.795276 0q27.212598 0 50.897638 9.574803t41.322835 26.204724 27.716535 38.80315 10.07874 47.370079l0 675.275591zM738.771654 170.330709l-455.559055 0 0 577.511811 455.559055 0 0-577.511811zM510.992126 776.062992q-21.165354 0-36.787402 15.11811t-15.622047 37.291339q0 21.165354 15.622047 36.787402t36.787402 15.622047q22.173228 0 37.291339-15.622047t15.11811-36.787402q0-22.173228-15.11811-37.291339t-37.291339-15.11811zM591.622047 84.661417q0-8.062992-5.03937-12.598425t-11.086614-4.535433l-128 0q-5.03937 0-10.582677 4.535433t-5.543307 12.598425 5.03937 12.598425 11.086614 4.535433l128 0q6.047244 0 11.086614-4.535433t5.03937-12.598425z"
                  p-id="3754" fill="#d81e06"></path>
            </svg>
          </div>
        </div>
        <div class="right">
          <div class="qrCode">
            <div class="item">
              <img src="../assets/images/code_app.png" alt="">
              <svg t="1691038180685" class="icon" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="2565" width="16" height="16">
                <path
                    d="M337.387283 341.82659c-17.757225 0-35.514451 11.83815-35.514451 29.595375s17.757225 29.595376 35.514451 29.595376 29.595376-11.83815 29.595376-29.595376c0-18.49711-11.83815-29.595376-29.595376-29.595375zM577.849711 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763zM501.641618 401.017341c17.757225 0 29.595376-12.578035 29.595376-29.595376 0-17.757225-11.83815-29.595376-29.595376-29.595375s-35.514451 11.83815-35.51445 29.595375 17.757225 29.595376 35.51445 29.595376zM706.589595 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763z"
                    fill="#dbdbdb" p-id="2566"></path>
                <path
                    d="M510.520231 2.959538C228.624277 2.959538 0 231.583815 0 513.479769s228.624277 510.520231 510.520231 510.520231 510.520231-228.624277 510.520231-510.520231-228.624277-510.520231-510.520231-510.520231zM413.595376 644.439306c-29.595376 0-53.271676-5.919075-81.387284-12.578034l-81.387283 41.433526 22.936416-71.768786c-58.450867-41.433526-93.965318-95.445087-93.965317-159.815029 0-113.202312 105.803468-201.988439 233.803468-201.98844 114.682081 0 216.046243 71.028902 236.023121 166.473989-7.398844-0.739884-14.797688-1.479769-22.196532-1.479769-110.982659 1.479769-198.289017 85.086705-198.289017 188.67052 0 17.017341 2.959538 33.294798 7.398844 49.572255-7.398844 0.739884-15.537572 1.479769-22.936416 1.479768z m346.265896 82.867052l17.757225 59.190752-63.630058-35.514451c-22.936416 5.919075-46.612717 11.83815-70.289017 11.83815-111.722543 0-199.768786-76.947977-199.768786-172.393063-0.739884-94.705202 87.306358-171.653179 198.289017-171.65318 105.803468 0 199.028902 77.687861 199.028902 172.393064 0 53.271676-34.774566 100.624277-81.387283 136.138728z"
                    fill="#dbdbdb" p-id="2567"></path>
              </svg>
              <p>微信扫一扫关注</p>
              <p>“快速预约挂号”</p>
            </div>
            <div class="item">
              <img src="../assets/images/code_login_wechat.png" alt="">
              <svg t="1691038325666" class="icon" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="4412" width="16" height="16">
                <path
                    d="M820.409449 797.228346q0 25.19685-10.07874 46.866142t-27.716535 38.299213-41.322835 26.204724-50.897638 9.574803l-357.795276 0q-27.212598 0-50.897638-9.574803t-41.322835-26.204724-27.716535-38.299213-10.07874-46.866142l0-675.275591q0-25.19685 10.07874-47.370079t27.716535-38.80315 41.322835-26.204724 50.897638-9.574803l357.795276 0q27.212598 0 50.897638 9.574803t41.322835 26.204724 27.716535 38.80315 10.07874 47.370079l0 675.275591zM738.771654 170.330709l-455.559055 0 0 577.511811 455.559055 0 0-577.511811zM510.992126 776.062992q-21.165354 0-36.787402 15.11811t-15.622047 37.291339q0 21.165354 15.622047 36.787402t36.787402 15.622047q22.173228 0 37.291339-15.622047t15.11811-36.787402q0-22.173228-15.11811-37.291339t-37.291339-15.11811zM591.622047 84.661417q0-8.062992-5.03937-12.598425t-11.086614-4.535433l-128 0q-5.03937 0-10.582677 4.535433t-5.543307 12.598425 5.03937 12.598425 11.086614 4.535433l128 0q6.047244 0 11.086614-4.535433t5.03937-12.598425z"
                    p-id="4413" fill="#bfbfbf"></path>
              </svg>
              <p>扫一扫下载</p>
              <p>“预约挂号”APP</p>
            </div>

          </div>
          <div class="text">
            <p>尚医通官方指定平台</p>
            <p>快速挂号 安全放心</p>
          </div>
        </div>
      </div>
      <template #footer>
        <el-button type="primary" @click="dialogClose">关闭窗口</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import useUserStore from "@/store/modules/user";
import {Search, Lock} from "@element-plus/icons-vue";
import {computed, reactive, ref, watch} from "vue";
import type {FormInstance, FormRules} from 'element-plus'
import {reqWechatLoginParam} from "@/api/hospital";

let userStore = useUserStore();
let scene = ref<number>(0);  // 手机号登录 scene=0 |微信登录 scene=1
let loginParam = reactive({
  phone: '',
  code: '',
}) // 收集表单数据
let butTimer = ref<any>(false);  //禁用按钮定时器
let countdownNumber = ref<number>(5);  //倒计时显示的数字
let isPhone = computed(() => {
  let reg = /^[1](([3][0-9])|([4][0,1,4-9])|([5][0-3,5-9])|([6][2,5,6,7])|([7][0-8])|([8][0-9])|([9][0-3,5-9]))[0-9]{8}$/;
  return reg.test(loginParam.phone)
});  // 计算出当前表单元素手机的内容
let formRef = ref<FormInstance>();   //获取表单实例

let validatePhone = (rule: any, value: any, callBack: any) => {
  let reg = /^[1](([3][0-9])|([4][0,1,4-9])|([5][0-3,5-9])|([6][2,5,6,7])|([7][0-8])|([8][0-9])|([9][0-3,5-9]))[0-9]{8}$/;
  if (reg.test(value)) {
    callBack()
  } else {
    callBack(new Error("请输入正确的手机号"))
  }
}//phone自定义校验规则
let validateCode = (rule: any, value: any, callBack: any) => {
  let reg = /^\d{6}$/
  if (reg.test(value)) {
    callBack()
  } else {
    callBack(new Error("请输入六位的验证码"))
  }
}//code自定义校验规则
let rules = reactive<FormRules<typeof loginParam>>({
  phone: [{validator: validatePhone, trigger: "change"}],
  code: [{validator: validateCode, trigger: 'change'}]
}) //rules表单校验规则


// 点击获取手机验证码
let getPhoneCode = async () => {
  try {
    await userStore.getCode(loginParam.phone);
    loginParam.code = userStore.code;
  } catch (e) {
    console.log(e.message);
  }
  if (butTimer.value) return  //节流
  // 验证码倒计时按钮数字递减
  let setTimer = setInterval(() => {
    countdownNumber.value -= 1;
    if (countdownNumber.value < 0) {
      countdownNumber.value = 5;
    }
  }, 1000)
  // 五秒后按钮变为可用状态并清除间隔器
  butTimer.value = setTimeout(() => {
    butTimer.value = false;
    clearInterval(setTimer)
  }, 5000)

}

// 点击微信登录
let wechatLogin = async () => {
  scene.value = 1;
  let result = await reqWechatLoginParam(window.location.origin + '/wxlogin')
  // @ts-ignore
  new WxLogin({
    self_redirect: true, //true:手机点击确认登录后可以在 iframe 内跳转到 redirect_uri
    id: "login_container", //显示二维码容器设置
    appid: result.data.appid, //应用位置标识appid
    scope: "snsapi_login", //当前微信扫码登录页面已经授权了
    redirect_uri: result.data.redirectUri, //填写授权回调域路径,就是用户授权成功以后，微信服务器向公司后台推送code地址
    state: result.data.state, //state就是学校服务器重定向的地址携带用户信息
    style: "black",
    href: "",
  });

}

// 点击用户登录（手机登录）
let userLogin = async () => {
  await formRef.value.validate();
  try {
    await userStore.phoneLogin(loginParam)
    userStore.showLogin = false; //不显示login组件
  } catch (e) {
    console.log(e.message);
  }
}

let dialogClose = () => {
  userStore.showLogin = false;
  scene.value = 0;
  formRef.value.resetFields()
}

watch(() => scene.value, (val:number) => {
  if (val === 1) {
    let timer = setInterval(() => {
      if (JSON.parse(localStorage.getItem('USERINFO'))) {
        userStore.showLogin = false;
        userStore.userInfo = JSON.parse(localStorage.getItem('USERINFO'));
        clearInterval(timer);
      }
    },1000)
  }
})


</script>

<style scoped lang="less">
.login-container {
  :deep(.el-dialog__body) {
    border-top: 1px red solid;

    .content {
      display: flex;

      .left {
        flex: 1;
        padding: 20px;
        border: 1px solid #ccc;

        .bottom {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-top: 20px;

          p, svg {
            margin-top: 5px;
          }

          svg {
            cursor: pointer;
          }
        }

      }

      .right {
        flex: 1;

        .qrCode {
          display: flex;
          justify-content: space-around;

          .item {
            display: flex;
            flex-direction: column;
            align-items: center;

            img {
              width: 130px;
              height: 130px;
            }
          }
        }

        .text {
          text-align: center;

          p {
            margin: 20px 0;
            font-size: 20px;
            font-weight: 900;
          }

        }
      }
    }
  }
  .wechatLogin {
    display: flex;
    flex-direction: column;
    align-items: center;
    #login_container {
      display: flex;
      justify-content: center;
    }
    svg {
      margin-top: 10px;
      cursor: pointer;
    }

  }
}
</style>